<template>
  <div>
    <el-dialog title="编辑权限" :visible.sync="editdialogVisible" :before-close="close" width="600px">
      <el-form style="padding-right: 45px;" :model="permissionModel" :rules="rules" ref="permissionModel" label-width="100px" class="demo-permissionModel">
        <el-form-item label="权限名称">
          <el-input v-model="permissionModel.displayname" disabled=""></el-input>
        </el-form-item>
        <el-form-item label="权限值" prop="targetname">
          <el-input v-model="permissionModel.targetname"></el-input>
        </el-form-item>
        <el-form-item label="权限描述">
          <el-input v-model="permissionModel.description"></el-input>
        </el-form-item>
        <el-form-item label="权限类型:" prop="permissiontype">
          <el-select v-model="permissionModel.permissiontype" class="wid100">
            <el-option label="全部" value=""></el-option>
            <el-option v-for="item in PermissionType" :key="item.id" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标签">
          <el-input v-model="permissionModel.tag"></el-input>
        </el-form-item>
      </el-form>
      <div class="dialog-footer text-center mt-3">
        <el-button type="primary" @click="submitForm('permissionModel')">确认</el-button>
        <el-button @click="close">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ["editdialogVisible", "permissionModel"], //接受父组件的值
  data() {
    return {
      rules: {
        targetname: [
          { required: true, message: "请输入权限值", trigger: "blur" }
        ],
        permissiontype: [
          { required: true, message: "请选择权限类型", trigger: "blur" }
        ]
      },

      PermissionType: [
        {
          value: 1,
          label: "菜单权限"
        },
        {
          value: 2,
          label: "普通权限"
        }
      ]
    };
  },

  created() {},

  methods: {
    submitForm: function(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let model = this.permissionModel;
          let data = {
            displayname: model.displayname,
            targetname: model.targetname,
            description: model.description,
            permissiontype: model.permissiontype,
            tag: model.tag,
            permissionId: model.id
          };
          this.$api.post("/api/Permission/update", data,true).then(rsp => {
            if (rsp != false) {
              this.close();
              this.$emit("successAddPermission");
            }
          });
        }
      });
    },

    close() {
      this.$emit("closeEditPermission");
    }
  }
};
</script>
